<template>
	<view class="h-fill content">
		<u-navbar title="我的团队" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
		<u-sticky>
			<view class="simple-card uni-flex uni-column">
				<view class="uni-flex align-center justify-center">
					<u-tabs :list="tabs" :current="tabIdx" activeColor="#D61719" bgColor="#F5F5F5" @change="handleTabChange"></u-tabs>
				</view>
				<u-subsection bgColor="#F5F5F5" :list="sections" :current="sectionIdx" @change="handleSectionChange"></u-subsection>
				<view class="pad">
					<u-search placeholder="输入ID" v-model="keyword" @custom="reload" @search="reload" @clear="reload"></u-search>
				</view>
			</view>
		</u-sticky>
		<!-- <u-sticky :h5NavHeight="navHeight">
			<view class="simple-card uni-flex uni-column">
				<view class="uni-flex align-center justify-center">
					<u-tabs :list="tabs" :current="tabIdx" activeColor="#D61719" bgColor="#F5F5F5" @change="handleTabChange"></u-tabs>
				</view>
				<u-subsection bgColor="#F5F5F5" :list="sections" :current="sectionIdx" @change="handleSectionChange"></u-subsection>
				<view class="pad">
					<u-search placeholder="输入ID" v-model="keyword" @custom="reload" @search="reload" @clear="reload"></u-search>
				</view>
			</view>
		</u-sticky> -->
		<view>
			<view v-if="list.length" class="pad">
				<view v-for="(item, index) in list" :key="item.id" class="team-item round-corner uni-flex">
					<image class="user-head" :src="item.member.avatar || '/static/img/user.png'"></image>
					<view class="uni-flex-extend l-mg uni-flex uni-column">
						<view class="uni-flex align-center">
							<text class="uni-flex-extend uni-bold uni-text-big">ID：{{item.member.id}}</text>
							<nice-grade :showCrown="sectionIdx === 0" :leftText="sectionIdx === 0 ? '1级' : '2级'" :level="item.grade" :rightText="expertGrades[item.grade + ''].label"></nice-grade>
						</view>
						<view class="t-mg uni-text-gray" style="margin-left: -10rpx">
							<u-row>
								<u-col :span="4">名称：</u-col>
								<u-col :span="8">{{item.member.nickname || '微信用户'}}</u-col>
							</u-row>
							<u-row>
								<u-col :span="4">团队数量：</u-col>
								<u-col :span="8">
									<view class="uni-flex align-center">
										<text class="r-mg">{{item.teamCount}}</text>
										<u-tag @click="navToSecondLevelTeam(index)" v-if="sectionIdx == 0 && item.teamCount > 0" size="mini" shape="circle" text="查看二级团队" color="#8C76F4" bgColor="rgba(140, 118, 244, 0.1)" borderColor="#8C76F4"></u-tag>
									</view>
								</u-col>
							</u-row>
							<u-row v-if="item.member.mobile && userInfo.shareGrade == 4">
								<u-col :span="4">联系电话：</u-col>
								<u-col :span="8">{{item.member.mobile || '-'}}</u-col>
							</u-row>
							<u-row v-if="item.parent">
								<u-col :span="4">上级：</u-col>
								<u-col :span="8">{{item.parent.nickname || '-'}}(ID:{{item.parent.id || '-'}})</u-col>
							</u-row>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadingStatus"></uni-load-more>
			</view>
			<view v-else class="pad">
				<u-empty></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMyTeam} from "../../api/platform/user.js"
	import {expertGrades} from "../../common/constants.js"
	import {getNavHeightMp} from "../../common/maUtil.js"
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				expertGrades,
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				list: [],
				pageNum: 0,
				pageSize: 10,
				loadingStatus: 'noMore',
				
				tabs: [{
					name: "临时团队"
				}, {
					name: "永久团队"
				}],
				tabIdx: 0,
				sections: [{
					name: "一级团队"
				}, {
					name: "二级团队"
				}],
				sectionIdx: 0,
				keyword: "",
				
				navHeight: 0
			};
		},
		computed: {
			...mapState(["userInfo"])
		},
		created() {
			// #ifdef MP
			this.navHeight = getNavHeightMp();
			// #endif
		},
		onShow() {
			this.reload();
		},
		async onPullDownRefresh() {
			await this.reload();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			navToSecondLevelTeam(index) {
				uni.navigateTo({
					url: `./second-level-team?userId=${this.list[index].userId}&temporary=${this.tabIdx === 0 ? false : true}`
				})
			},
			handleTabChange(index) {
				this.tabIdx = index;
				this.sectionIdx = 0;
				this.reload();
			},
			handleSectionChange(index) {
				this.sectionIdx = index;
				this.reload();
			},
			async reload() {
				if (this.loadingStatus === "loading") {
					return;
				}
				this.list = [];
				this.pageNum = 0;
				this.loadingStatus = "more";
				await this.loadMore();
			},
			async loadMore() {
				if (this.loadingStatus === "loading" || this.loadingStatus === "noMore") {
					return;
				}
				let prevStatus = this.loadingStatus;
				this.loadingStatus = "loading";
				try{
					let data = {
						temporary: this.tabIdx === 0 ? true : false,
						level: this.sectionIdx === 0 ? 1 : 2,
						pageNum: this.pageNum + 1,
						pageSize: this.pageSize
					}
					if (this.keyword) {
						data.keyword = this.keyword;
					}
					let res = await getMyTeam(data);
					if (res.list.length) {
						this.pageNum += 1;
						this.list = this.list.concat(res.list);
					}
					if (this.list.length < res.total) {
						this.loadingStatus = "more";
					} else {
						this.loadingStatus = "noMore";
					}
				}catch(e){
					this.$log("加载团队列表遇到错误", e);
					this.loadingStatus = prevStatus;
				}
			}
		}
	}
</script>

<style>
	.team-item {
		background-color: #FFFFFF;
		padding: 40rpx 20rpx;
		margin-bottom: 20rpx;
	}
	.simple-card {
		padding: 0;
		background-color: #F5F5F5;
	}
	.subsection-wrapper {
		height: 40px;
	}
</style>
